<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.60">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/logo.png"><title>Echarts中Option属性设置 | 王茂铭</title><meta name="description" content="Just playing around">
    <link rel="modulepreload" href="/wb/assets/app-32a7af8e.js"><link rel="modulepreload" href="/wb/assets/framework-c27b6911.js"><link rel="modulepreload" href="/wb/assets/122201.html-7699eb69.js"><link rel="modulepreload" href="/wb/assets/122201.html-572b8a97.js"><link rel="prefetch" href="/wb/assets/index.html-6d5e9dd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8e728de0.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-71f98eb6.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-47172bd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c4d32c30.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-75e9cb1a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a2c706b5.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-17c6444b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6958f27b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d981608d.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ff4c5386.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-97c1c024.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8596a00c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2434c570.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0b4e72f2.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-70379254.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-bcce1cd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e1575d57.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c08582eb.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4df8ef63.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-fa97dbe9.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ea3cbcd8.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5d7f901a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ec6cc437.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8802c78f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c5b96a91.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-55c1ed81.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f36d8351.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-da9b2394.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5ac52d4f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-27e68ae7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-1834aef1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d4810458.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-560c14b4.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-35b38f45.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-93b00c29.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f42fa99c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c7a62b28.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-7f3eeb92.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c8596e07.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f6681850.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2773f5fc.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6cf06f14.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-1a88d37b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c8e98ed0.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-800887e5.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-06f5ab5e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-db4c3376.js" as="script"><link rel="prefetch" href="/wb/assets/031101.html-02798306.js" as="script"><link rel="prefetch" href="/wb/assets/031102.html-15b3adb4.js" as="script"><link rel="prefetch" href="/wb/assets/031501.html-3134e3b4.js" as="script"><link rel="prefetch" href="/wb/assets/122102.html-ceeb362a.js" as="script"><link rel="prefetch" href="/wb/assets/010601.html-3fe2b350.js" as="script"><link rel="prefetch" href="/wb/assets/010602.html-d33aafe0.js" as="script"><link rel="prefetch" href="/wb/assets/010603.html-731c8a98.js" as="script"><link rel="prefetch" href="/wb/assets/010604.html-6bc8d643.js" as="script"><link rel="prefetch" href="/wb/assets/010701.html-12966c2a.js" as="script"><link rel="prefetch" href="/wb/assets/010801.html-0fca227d.js" as="script"><link rel="prefetch" href="/wb/assets/011001.html-d10dc4a2.js" as="script"><link rel="prefetch" href="/wb/assets/011201.html-bbd7d0bc.js" as="script"><link rel="prefetch" href="/wb/assets/011202.html-f1b9f476.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-f7ba82d3.js" as="script"><link rel="prefetch" href="/wb/assets/011501.html-9196b987.js" as="script"><link rel="prefetch" href="/wb/assets/010501.html-43e0fee1.js" as="script"><link rel="prefetch" href="/wb/assets/031801.html-0a02ab60.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-74b61e87.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-2c9d1221.js" as="script"><link rel="prefetch" href="/wb/assets/081101.html-86de4307.js" as="script"><link rel="prefetch" href="/wb/assets/092001.html-20d934d3.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-1890511d.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-ae3f31b4.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-74cff86b.js" as="script"><link rel="prefetch" href="/wb/assets/092104.html-004f7a47.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-3f3fe144.js" as="script"><link rel="prefetch" href="/wb/assets/122101.html-f85b1d72.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-b6d3d031.js" as="script"><link rel="prefetch" href="/wb/assets/092106.html-709c9d31.js" as="script"><link rel="prefetch" href="/wb/assets/121501.html-6bc29a5d.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-f5635806.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-054223dd.js" as="script"><link rel="prefetch" href="/wb/assets/guide.html-561bbc0f.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-a89f05e1.js" as="script"><link rel="prefetch" href="/wb/assets/021401.html-b25135ac.js" as="script"><link rel="prefetch" href="/wb/assets/022001.html-3fd7ebe7.js" as="script"><link rel="prefetch" href="/wb/assets/022101.html-f6317717.js" as="script"><link rel="prefetch" href="/wb/assets/030801.html-cbbde2a3.js" as="script"><link rel="prefetch" href="/wb/assets/032201.html-33e3ac66.js" as="script"><link rel="prefetch" href="/wb/assets/022201.html-963afee1.js" as="script"><link rel="prefetch" href="/wb/assets/030501.html-84913c94.js" as="script"><link rel="prefetch" href="/wb/assets/home.html-3eb4d994.js" as="script"><link rel="prefetch" href="/wb/assets/plugin.html-1483d1d0.js" as="script"><link rel="prefetch" href="/wb/assets/standard.html-14b52c51.js" as="script"><link rel="prefetch" href="/wb/assets/vuePackage.html-0219c43d.js" as="script"><link rel="prefetch" href="/wb/assets/404.html-60b35caa.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-cc91309e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-605912bc.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-beb31cc7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b61a46e1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f98e8ff2.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-fa9fcc1d.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-073d6df6.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c3fee9e4.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-52c1909f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-def60933.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-76d7399e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-cc87ab1a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-49a24dd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f6c26c3a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4a7242ff.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b00d5359.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e2ee4194.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e4115364.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4521aa3a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c4b820ea.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6fdefc04.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-50818995.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2014b8cd.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b1dc5ed7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2ddb2e51.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-72fa249f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-217d2183.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0b40087e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c52474d7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8489252c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2407d7b8.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-daf2f840.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-db0ba367.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0999e780.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ff3616e1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-40ca6f0a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ba22b693.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f989ee07.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d7d4cc9f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6ee6582b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-955dcc0f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5feeb1e7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a5819ddb.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a45e3ca9.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-452ace3c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-46c84a4f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b428ebd7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8380941b.js" as="script"><link rel="prefetch" href="/wb/assets/031101.html-b6a75232.js" as="script"><link rel="prefetch" href="/wb/assets/031102.html-7868935d.js" as="script"><link rel="prefetch" href="/wb/assets/031501.html-a7e44746.js" as="script"><link rel="prefetch" href="/wb/assets/122102.html-6865b75f.js" as="script"><link rel="prefetch" href="/wb/assets/010601.html-dad7a79c.js" as="script"><link rel="prefetch" href="/wb/assets/010602.html-7fb1cd64.js" as="script"><link rel="prefetch" href="/wb/assets/010603.html-e563daab.js" as="script"><link rel="prefetch" href="/wb/assets/010604.html-815b9c8a.js" as="script"><link rel="prefetch" href="/wb/assets/010701.html-2b4e145e.js" as="script"><link rel="prefetch" href="/wb/assets/010801.html-b73655fc.js" as="script"><link rel="prefetch" href="/wb/assets/011001.html-2b9771e1.js" as="script"><link rel="prefetch" href="/wb/assets/011201.html-1af6d9d4.js" as="script"><link rel="prefetch" href="/wb/assets/011202.html-9093c19a.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-a03518e6.js" as="script"><link rel="prefetch" href="/wb/assets/011501.html-e90b5831.js" as="script"><link rel="prefetch" href="/wb/assets/010501.html-2ebe48c4.js" as="script"><link rel="prefetch" href="/wb/assets/031801.html-e190b745.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-047558e2.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-3f4ca6b9.js" as="script"><link rel="prefetch" href="/wb/assets/081101.html-c0375214.js" as="script"><link rel="prefetch" href="/wb/assets/092001.html-b2f5f9d7.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-40dbcdf2.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-111fa3dd.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-dfe62a63.js" as="script"><link rel="prefetch" href="/wb/assets/092104.html-6ea8f578.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-f58f55b7.js" as="script"><link rel="prefetch" href="/wb/assets/122101.html-a20220c8.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-ea49cb27.js" as="script"><link rel="prefetch" href="/wb/assets/092106.html-6d252224.js" as="script"><link rel="prefetch" href="/wb/assets/121501.html-4c68ef56.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-01673776.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-49fde8c8.js" as="script"><link rel="prefetch" href="/wb/assets/guide.html-85aeb00d.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-869da26f.js" as="script"><link rel="prefetch" href="/wb/assets/021401.html-ecbb30c7.js" as="script"><link rel="prefetch" href="/wb/assets/022001.html-f65da4af.js" as="script"><link rel="prefetch" href="/wb/assets/022101.html-bf352765.js" as="script"><link rel="prefetch" href="/wb/assets/030801.html-c3885c66.js" as="script"><link rel="prefetch" href="/wb/assets/032201.html-86eb91fa.js" as="script"><link rel="prefetch" href="/wb/assets/022201.html-998fc43b.js" as="script"><link rel="prefetch" href="/wb/assets/030501.html-61615073.js" as="script"><link rel="prefetch" href="/wb/assets/home.html-5d4ac598.js" as="script"><link rel="prefetch" href="/wb/assets/plugin.html-85fb2e2c.js" as="script"><link rel="prefetch" href="/wb/assets/standard.html-52035280.js" as="script"><link rel="prefetch" href="/wb/assets/vuePackage.html-6cc12cdb.js" as="script"><link rel="prefetch" href="/wb/assets/404.html-16732b58.js" as="script"><link rel="prefetch" href="/wb/assets/reco-valine-a0c1af1f.js" as="script">
    <link rel="preload" href="/wb/assets/style-cad7fe2b.css" as="style"><link rel="stylesheet" href="/wb/assets/style-cad7fe2b.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper series--no show-catalog"><div><header class="navbar-container"><!--[--><div class="site-brand nav-item"><img class="logo" src="/wb/logo.png" alt="王茂铭"><a href="/wb/" class="site-name can-hide">王茂铭</a></div><div class="nav-item navbar-links-wrapper" style=""><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form><nav class="navbar-links"><!--[--><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Categories"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Categories"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/categories/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/React/1/" class="link" aria-label="React"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->React<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/Angular/1/" class="link" aria-label="Angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/WebGIS/1/" class="link" aria-label="WebGIS"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->WebGIS<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/gongjuyuyuedu/1/" class="link" aria-label="工具与阅读"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->工具与阅读<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/houduan/1/" class="link" aria-label="后端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->后端<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Tags"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Tags"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/tags/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qiankun/1/" class="link" aria-label="qiankun"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->qiankun<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/react/1/" class="link" aria-label="react"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->react<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/element/1/" class="link" aria-label="element"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->element<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/tree/1/" class="link" aria-label="tree"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->tree<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/js/1/" class="link" aria-label="js"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->js<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/daimajiqiao/1/" class="link" aria-label="代码技巧"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->代码技巧<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/diceng/1/" class="link" aria-label="底层"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->底层<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/angular/1/" class="link" aria-label="angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/echars/1/" class="link" aria-label="echars"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->echars<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/keshihua/1/" class="link" aria-label="可视化"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->可视化<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/gaodeditu/1/" class="link" aria-label="高德地图"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->高德地图<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shouce/1/" class="link" aria-label="手册"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->手册<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/es6/1/" class="link" aria-label="es6"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->es6<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/jianrongxing/1/" class="link" aria-label="兼容性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->兼容性<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/node/1/" class="link" aria-label="node"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->node<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/html/1/" class="link" aria-label="html"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->html<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/css/1/" class="link" aria-label="css"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->css<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/python/1/" class="link" aria-label="python"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->python<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/flask/1/" class="link" aria-label="flask"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->flask<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/Objective-C/1/" class="link" aria-label="Objective-C"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Objective-C<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/webpack/1/" class="link" aria-label="webpack"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->webpack<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/git/1/" class="link" aria-label="git"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->git<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shuji/1/" class="link" aria-label="书籍"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->书籍<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/aihao/1/" class="link" aria-label="爱好"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->爱好<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><a href="/wb/" class="link router-link-active" aria-label="首页"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->首页<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="文档"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="文档"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/home" class="link" aria-label="公共方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->公共方法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/vuePackage" class="link" aria-label="vue组件包"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue组件包<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/standard" class="link" aria-label="前端代码规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端代码规范<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><span class="xicon-container btn-toggle-dark-mode btn--dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></span><span class="xicon-container btn-toggle-menus"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><circle cx="16" cy="8" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="24" r="2" fill="currentColor"></circle></svg></span></div><!--]--></header><div class="mobile-menus-container"><nav class="navbar-links mobile"><!--[--><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Categories"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Categories"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/categories/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/React/1/" class="link" aria-label="React"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->React<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/Angular/1/" class="link" aria-label="Angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/WebGIS/1/" class="link" aria-label="WebGIS"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->WebGIS<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/gongjuyuyuedu/1/" class="link" aria-label="工具与阅读"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->工具与阅读<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/houduan/1/" class="link" aria-label="后端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->后端<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Tags"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Tags"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/tags/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qiankun/1/" class="link" aria-label="qiankun"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->qiankun<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/react/1/" class="link" aria-label="react"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->react<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/element/1/" class="link" aria-label="element"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->element<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/tree/1/" class="link" aria-label="tree"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->tree<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/js/1/" class="link" aria-label="js"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->js<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/daimajiqiao/1/" class="link" aria-label="代码技巧"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->代码技巧<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/diceng/1/" class="link" aria-label="底层"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->底层<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/angular/1/" class="link" aria-label="angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/echars/1/" class="link" aria-label="echars"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->echars<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/keshihua/1/" class="link" aria-label="可视化"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->可视化<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/gaodeditu/1/" class="link" aria-label="高德地图"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->高德地图<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shouce/1/" class="link" aria-label="手册"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->手册<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/es6/1/" class="link" aria-label="es6"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->es6<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/jianrongxing/1/" class="link" aria-label="兼容性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->兼容性<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/node/1/" class="link" aria-label="node"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->node<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/html/1/" class="link" aria-label="html"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->html<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/css/1/" class="link" aria-label="css"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->css<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/python/1/" class="link" aria-label="python"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->python<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/flask/1/" class="link" aria-label="flask"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->flask<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/Objective-C/1/" class="link" aria-label="Objective-C"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Objective-C<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/webpack/1/" class="link" aria-label="webpack"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->webpack<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/git/1/" class="link" aria-label="git"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->git<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shuji/1/" class="link" aria-label="书籍"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->书籍<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/aihao/1/" class="link" aria-label="爱好"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->爱好<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><a href="/wb/" class="link router-link-active" aria-label="首页"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->首页<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="文档"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="文档"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/home" class="link" aria-label="公共方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->公共方法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/vuePackage" class="link" aria-label="vue组件包"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue组件包<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/standard" class="link" aria-label="前端代码规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端代码规范<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><div class="appearance"><span>Appearance</span><span class="xicon-container btn-toggle-dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></span></div></div><div class="series-mask"></div><aside class="series-container"><div class="site-brand"><img class="logo" src="/wb/logo.png" alt="王茂铭"><a href="/wb/" class="site-name can-hide">王茂铭</a></div><!--[--><!--]--></aside><!--[--><main class="page-container"><h1 class="page-title">Echarts中Option属性设置</h1><div class="page-info"><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M16 4a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7z" fill="currentColor"></path><path d="M26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->王茂铭<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2021-12-22<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M10 14a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm0-6a2 2 0 1 0 1.998 2.004A2.002 2.002 0 0 0 10 8z" fill="currentColor"></path><path d="M16.644 29.415L2.586 15.354A2 2 0 0 1 2 13.941V4a2 2 0 0 1 2-2h9.941a2 2 0 0 1 1.414.586l14.06 14.058a2 2 0 0 1 0 2.828l-9.943 9.943a2 2 0 0 1-2.829 0zM4 4v9.942L18.058 28L28 18.058L13.942 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->echars 可视化<!--]--></span></span><!----></div><div class="theme-reco-default-content"><div><h2 id="title-标题组件" tabindex="-1"><a class="header-anchor" href="#title-标题组件" aria-hidden="true">#</a> title--标题组件</h2><p>标题组件，包含主标题和副标题</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">title</span><span class="token operator">:</span><span class="token punctuation">{</span>
	<span class="token literal-property property">x</span><span class="token operator">:</span><span class="token string">&quot;left&quot;</span><span class="token punctuation">,</span>    <span class="token comment">// &#39;left&#39; | &#39;right&#39; | &#39;center&#39; | &#39;100px&#39;</span>
	<span class="token literal-property property">y</span><span class="token operator">:</span><span class="token string">&quot;4%&quot;</span><span class="token punctuation">,</span>     <span class="token comment">// &#39;top&#39; | &#39;bottom&#39; | &#39;center&#39; | &#39;100px&#39;</span>
    <span class="token comment">// 标题</span>
    <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//是否显示</span>
    <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">&quot;标题内容&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;#fff&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 主标题文字的颜色。</span>
      <span class="token literal-property property">fontStyle</span><span class="token operator">:</span> <span class="token string">&quot;normal&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 主标题文字字体的风格。 &#39;normal&#39;  &#39;italic&#39;  &#39;oblique&#39;</span>
      <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">&quot;normal&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 主标题文字字体的粗细。 &#39;normal&#39; &#39;bold&#39;  &#39;bolder&#39;  &#39;lighter&#39; 500|600</span>
      <span class="token literal-property property">fontFamily</span><span class="token operator">:</span> <span class="token string">&quot;sans-serif&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 主标题文字的字体系列。</span>
      <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token comment">// 字体大小</span>
      <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token string">&quot;30&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 行高</span>
      <span class="token comment">// width ... , // 文字块的宽度</span>
      <span class="token comment">// height ... , // 文字块的高度</span>
      <span class="token literal-property property">textBorderColor</span><span class="token operator">:</span> <span class="token string">&quot;transparent&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字本身的描边颜色。</span>
      <span class="token literal-property property">textBorderWidth</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字本身的描边宽度。</span>
      <span class="token literal-property property">textShadowColor</span><span class="token operator">:</span> <span class="token string">&quot;transparent&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字本身的阴影颜色。</span>
      <span class="token literal-property property">textShadowBlur</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字本身的阴影长度。</span>
      <span class="token literal-property property">textShadowOffsetX</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字本身的阴影 X 偏移。</span>
      <span class="token literal-property property">textShadowOffsetY</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">//  文字本身的阴影 Y 偏移。</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">subtext</span><span class="token operator">:</span> <span class="token string">&quot;bb&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 副标题文本</span>
    <span class="token literal-property property">subtextStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">&quot;16&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>   <span class="token comment">//副标题样式</span>
    <span class="token literal-property property">textAlign</span><span class="token operator">:</span> <span class="token string">&quot;auto&quot;</span><span class="token punctuation">,</span> <span class="token comment">//水平对齐&#39;auto&#39;、&#39;left&#39;、&#39;right&#39;、&#39;center&#39;</span>
    <span class="token literal-property property">textVerticalAlign</span><span class="token operator">:</span> <span class="token string">&quot;auto&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 垂直对齐  &#39;auto&#39;、&#39;top&#39;、&#39;bottom&#39;、&#39;middle&#39;</span>
    <span class="token literal-property property">triggerEvent</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否触发事件</span>
    <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token comment">// 标题内边距  5/[5,2,4,7]</span>
    <span class="token literal-property property">itemGap</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">//主副标题之间的间距</span>
    <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 距离 left top right bottom</span>
    <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token string">&quot;center&quot;</span><span class="token punctuation">,</span>  <span class="token comment">// 水平安放位置，默认为左对齐，可选为：&#39;center&#39; ¦ &#39;left&#39; ¦ &#39;right&#39; ¦ {number}（x坐标，单位px）</span>
    <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token string">&quot;4%&quot;</span><span class="token punctuation">,</span>      <span class="token comment">// 垂直安放位置，默认为全图顶端，可选为：// &#39;top&#39; ¦ &#39;bottom&#39; ¦ &#39;center&#39;¦ {number}（y坐标，单位px）</span>
    <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">&quot;pink&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 标题背景色</span>
    <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">&quot;#ccc&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 标题的边框颜色</span>
    <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token comment">// 标题的边框线宽。</span>
    <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 圆角半径</span>
    <span class="token literal-property property">shadowBlur</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">//图形阴影的模糊大小</span>
    <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">&quot;rgba(0, 0, 0, 0.5)&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 阴影颜色</span>
    <span class="token literal-property property">shadowOffsetX</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token comment">// 阴影水平方向上的偏移距离。</span>
    <span class="token literal-property property">shadowOffsetY</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token comment">//阴影垂直方向上的偏移距离。</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="legend-图例组件" tabindex="-1"><a class="header-anchor" href="#legend-图例组件" aria-hidden="true">#</a> legend--图例组件</h2><p>图例组件,展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//是否显示</span>
  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;plain&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 图例的类型 &#39;plain&#39;:普通图例  &#39;scroll&#39;:可滚动翻页的图例</span>
  <span class="token literal-property property">zlevel</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 所有图形的 zlevel 值。</span>
  <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">&quot;circle&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">&quot;5%&quot;</span><span class="token punctuation">,</span> <span class="token comment">// bottom:&quot;20%&quot; // 组件离容器的距离</span>
  <span class="token literal-property property">right</span><span class="token operator">:</span> <span class="token string">&quot;5%&quot;</span><span class="token punctuation">,</span> <span class="token comment">//left:&quot;10%&quot;  // // 组件离容器的距离</span>
  <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&quot;auto&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 图例组件的宽度</span>
  <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">&quot;auto&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 图例组件的高度</span>
  <span class="token literal-property property">orient</span><span class="token operator">:</span> <span class="token string">&quot;horizontal&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 图例列表的布局朝向。 &#39;horizontal&#39;  &#39;vertical&#39;</span>
  <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">&quot;auto&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 图例标记和文本的对齐</span>
  <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token comment">// 图例内边距</span>
  <span class="token literal-property property">itemWidth</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token comment">// 图例标记的图形宽度。</span>
  <span class="token literal-property property">itemGap</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token comment">// 图例每项之间的间隔。</span>
  <span class="token literal-property property">itemHeight</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token comment">//  图例标记的图形高度。</span>
  <span class="token literal-property property">symbolKeepAspect</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。</span>
  <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token string">&#39;{a|text}{a|   }{b|&#39;</span> <span class="token operator">+</span>  name <span class="token operator">+</span> <span class="token string">&#39;}&#39;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">selectedMode</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 图例选择的模式，</span>
  <span class="token literal-property property">inactiveColor</span><span class="token operator">:</span> <span class="token string">&quot;#ccc&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 图例关闭时的颜色。</span>
  <span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;#556677&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字的颜色。</span>
    <span class="token literal-property property">fontStyle</span><span class="token operator">:</span> <span class="token string">&quot;normal&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字字体的风格。</span>
    <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">&quot;normal&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字字体的粗细。 &#39;normal&#39; &#39;bold&#39;  &#39;bolder&#39; &#39;lighter&#39;  100 | 200 | 300 | 400...</span>
    <span class="token literal-property property">fontFamily</span><span class="token operator">:</span> <span class="token string">&quot;sans-serif&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字的字体系列。</span>
    <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token comment">// 文字的字体大小。</span>
    <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token comment">// 行高。</span>
    <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">&quot;transparent&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字块背景色。</span>
    <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">&quot;transparent&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字块边框颜色。</span>
    <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字块边框宽度。</span>
    <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字块的圆角。</span>
    <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字块的内边距</span>
    <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">&quot;transparent&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字块的背景阴影颜色</span>
    <span class="token literal-property property">shadowBlur</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字块的背景阴影长度。</span>
    <span class="token literal-property property">shadowOffsetX</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字块的背景阴影 X 偏移。</span>
    <span class="token literal-property property">shadowOffsetY</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字块的背景阴影 Y 偏移。</span>
    <span class="token comment">// width: 50, // 文字块的宽度。 默认</span>
    <span class="token comment">// height: 40, // 文字块的高度 默认</span>
    <span class="token literal-property property">textBorderColor</span><span class="token operator">:</span> <span class="token string">&quot;transparent&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字本身的描边颜色。</span>
    <span class="token literal-property property">textBorderWidth</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字本身的描边宽度。</span>
    <span class="token literal-property property">textShadowColor</span><span class="token operator">:</span> <span class="token string">&quot;transparent&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字本身的阴影颜色。</span>
    <span class="token literal-property property">textShadowBlur</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字本身的阴影长度。</span>
    <span class="token literal-property property">textShadowOffsetX</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字本身的阴影 X 偏移。</span>
    <span class="token literal-property property">textShadowOffsetY</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 文字本身的阴影 Y 偏移。</span>
    <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;#fff&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 自定富文本样式</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="tooltip-提示框组件" tabindex="-1"><a class="header-anchor" href="#tooltip-提示框组件" aria-hidden="true">#</a> tooltip--提示框组件</h2><p>提示框组件,可以设置在多种地方： 可以设置在全局，即 tooltip 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip 可以设置在系列中，即 series.tooltip 可以设置在系列的每个数据项中，即 series.data.tooltip</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>tooltip <span class="token operator">=</span><span class="token punctuation">{</span>                                  <span class="token comment">//提示框组件</span>
    <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;item&#39;</span><span class="token punctuation">,</span>                        <span class="token comment">//触发类型,&#39;item&#39;数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 &#39;axis&#39;坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。</span>
    <span class="token literal-property property">triggerOn</span><span class="token operator">:</span><span class="token string">&quot;mousemove&quot;</span><span class="token punctuation">,</span>                  <span class="token comment">//提示框触发的条件,&#39;mousemove&#39;鼠标移动时触发。&#39;click&#39;鼠标点击时触发。&#39;mousemove|click&#39;同时鼠标移动和点击时触发。&#39;none&#39;不在 &#39;mousemove&#39; 或 &#39;click&#39; 时触发</span>
    <span class="token literal-property property">showContent</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>                       <span class="token comment">//是否显示提示框浮层</span>
    <span class="token literal-property property">alwaysShowContent</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>                 <span class="token comment">//是否永远显示提示框内容</span>
    <span class="token literal-property property">showDelay</span><span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span>                            <span class="token comment">//浮层显示的延迟，单位为 ms</span>
    <span class="token literal-property property">hideDelay</span><span class="token operator">:</span><span class="token number">100</span><span class="token punctuation">,</span>                          <span class="token comment">//浮层隐藏的延迟，单位为 ms</span>
    <span class="token literal-property property">enterable</span><span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span>                        <span class="token comment">//鼠标是否可进入提示框浮层中</span>
    <span class="token literal-property property">confine</span><span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span>                          <span class="token comment">//是否将 tooltip 框限制在图表的区域内</span>
    <span class="token literal-property property">transitionDuration</span><span class="token operator">:</span><span class="token number">0.4</span><span class="token punctuation">,</span>                 <span class="token comment">//提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动</span>
    <span class="token literal-property property">position</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">&#39;50%&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;50%&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token comment">//提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，</span>
    <span class="token literal-property property">formatter</span><span class="token operator">:</span><span class="token string">&quot;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&quot;</span><span class="token punctuation">,</span> <span class="token comment">//提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等</span>
    <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span><span class="token string">&quot;transparent&quot;</span><span class="token punctuation">,</span>          <span class="token comment">//标题背景色</span>
    <span class="token literal-property property">borderColor</span><span class="token operator">:</span><span class="token string">&quot;#ccc&quot;</span><span class="token punctuation">,</span>                     <span class="token comment">//边框颜色</span>
    <span class="token literal-property property">borderWidth</span><span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span>                          <span class="token comment">//边框线宽</span>
    <span class="token literal-property property">padding</span><span class="token operator">:</span><span class="token number">5</span><span class="token punctuation">,</span>                              <span class="token comment">//图例内边距，单位px  5  [5, 10]  [5,10,5,10]</span>
    <span class="token literal-property property">textStyle</span><span class="token operator">:</span>mytextStyle<span class="token punctuation">,</span>                  <span class="token comment">//文本样式</span>
    <span class="token literal-property property">axisPointer</span><span class="token operator">:</span> <span class="token punctuation">{</span>                          <span class="token comment">// 鼠标放在</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;cross&#39;</span><span class="token punctuation">,</span> <span class="token comment">//默认为line，line直线，cross十字准星，shadow阴影</span>
      <span class="token literal-property property">crossStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;#fff&#39;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> value<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
          value<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>seriesName <span class="token operator">+</span>
          <span class="token string">&quot;&lt;br/&gt;&quot;</span> <span class="token operator">+</span>
          value<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">+</span>
          unit <span class="token operator">+</span>
          <span class="token string">&quot;：&quot;</span> <span class="token operator">+</span>
          value<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>value <span class="token operator">+</span>
          <span class="token string">&quot;%&quot;</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>


</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="grid-可用于调整图例在整个容器中的占位" tabindex="-1"><a class="header-anchor" href="#grid-可用于调整图例在整个容器中的占位" aria-hidden="true">#</a> grid--可用于调整图例在整个容器中的占位</h2><p>直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。 也可用于调整图例在整个容器中的占位 在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">grid</span><span class="token operator">:</span><span class="token punctuation">{</span>
	<span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span>   <span class="token comment">//top:&quot;15%&quot; | right:&quot;3%&quot; | left:&quot;2%&quot; | bottom:&quot;12%&quot;</span>
    <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
    <span class="token literal-property property">x2</span><span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
    <span class="token literal-property property">y2</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
    <span class="token comment">// width: {totalWidth} - x - x2,</span>
    <span class="token comment">// height: {totalHeight} - y - y2,</span>
    <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token function">‘rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span>‘<span class="token punctuation">,</span>
    <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">&#39;#ccc&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">containLabel</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//防止坐标轴标签溢出</span>
<span class="token punctuation">}</span>


</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="xaxis-x-轴" tabindex="-1"><a class="header-anchor" href="#xaxis-x-轴" aria-hidden="true">#</a> xAxis--x 轴</h2><p>直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">boundaryGap</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><span class="token comment">// 刻度离纵轴有无间隙，默认true有间距</span>
  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;category&#39;</span><span class="token punctuation">,</span> <span class="token comment">//&#39;value&#39; 数值轴，适用于连续数据。 &#39;category&#39; 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 &#39;time&#39; 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 &#39;log&#39; 对数轴。适用于对数数据。</span>
  <span class="token literal-property property">position</span><span class="token operator">:</span><span class="token string">&#39;bottom&#39;</span><span class="token punctuation">,</span>  <span class="token comment">// &#39;bottom&#39; | &#39;top&#39;</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;(ETD)&#39;</span><span class="token punctuation">,</span><span class="token comment">// 横轴名称</span>
  <span class="token literal-property property">nameTextStyle</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token literal-property property">fontSize</span><span class="token operator">:</span><span class="token number">12</span><span class="token punctuation">,</span>
    <span class="token literal-property property">fontWeight</span><span class="token operator">:</span><span class="token string">&#39;bold&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">&#39;#ff0033&#39;</span><span class="token punctuation">,</span>
    <span class="token comment">//align:&#39;left&#39;,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">nameLocation</span><span class="token operator">:</span><span class="token string">&#39;middle&#39;</span><span class="token punctuation">,</span><span class="token comment">//坐标轴的位置 &#39;start&#39; | &#39;center&#39; | &#39;end&#39;</span>
  <span class="token literal-property property">nameGap</span><span class="token operator">:</span><span class="token number">50</span><span class="token punctuation">,</span><span class="token comment">//坐标轴名称与轴线之间的距离</span>
  <span class="token literal-property property">nameRotate</span><span class="token operator">:</span><span class="token number">90</span><span class="token punctuation">,</span><span class="token comment">//坐标轴名字旋转角度值,</span>
  <span class="token literal-property property">axisLabel</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">//坐标轴刻度标签的相关设置。</span>
      <span class="token comment">// clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里</span>
      <span class="token literal-property property">interval</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
      <span class="token literal-property property">inside</span><span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//  标签朝内还是朝外</span>
      <span class="token literal-property property">rotate</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span><span class="token comment">// 文字倾斜度</span>
      <span class="token literal-property property">textStyle</span><span class="token operator">:</span><span class="token punctuation">{</span>
      	<span class="token literal-property property">color</span><span class="token operator">:</span>&#39;#fff<span class="token punctuation">,</span>
      	<span class="token literal-property property">fontSize</span><span class="token operator">:</span><span class="token string">&#39;20px&#39;</span><span class="token punctuation">,</span>
      	<span class="token literal-property property">align</span><span class="token operator">:</span><span class="token string">&#39;center&#39;</span>
      <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">axisLine</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token literal-property property">lineStyle</span><span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">&#39;red&#39;</span>   <span class="token comment">//x轴颜色</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">symbol</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">&#39;none&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;arrow&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//轴线两边的箭头</span>
    <span class="token literal-property property">symbolSize</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span>  <span class="token comment">//箭头大小</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;2020-07-08 周三&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;2020-07-09 周四&#39;</span><span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&#39; &#39;</span><span class="token punctuation">,</span><span class="token string">&#39;\n&#39;</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment">// 横轴坐标值</span>
  <span class="token comment">// data: [{value:&#39;1&#39;,textStyle:{</span>
            <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">&#39;#ff0033&#39;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">&#39;2/7&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;3&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;4&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;5&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;6&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;7&#39;</span><span class="token punctuation">]</span><span class="token comment">//每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名</span>
  <span class="token literal-property property">splitLine</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  	<span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>，
  	<span class="token literal-property property">lineStyle</span><span class="token operator">:</span><span class="token punctuation">{</span>  <span class="token comment">//属性lineStyle（详见lineStyle）控制线条样式</span>
		<span class="token literal-property property">color</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">&#39;#ccc&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
		<span class="token literal-property property">width</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
		<span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">&#39;solid&#39;</span>
	<span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token comment">// 取消X轴的网格</span>
  <span class="token literal-property property">splitArea</span><span class="token operator">:</span><span class="token punctuation">{</span>   <span class="token comment">//分隔区域</span>
    <span class="token literal-property property">show</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">areaStyle</span><span class="token operator">:</span><span class="token punctuation">{</span>
		<span class="token literal-property property">color</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">&#39;rgba(250,250,250,0.3)&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;rgba(200,200,200,0.3)&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
	<span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">axisTick</span><span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token comment">// 显示隐藏刻度线</span>
   <span class="token literal-property property">inside</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//刻度朝内还是朝外</span>
   <span class="token literal-property property">alignWithLabel</span><span class="token operator">:</span> <span class="token boolean">true</span>   <span class="token comment">// 刻度线是否显示</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="yaxis-y-轴" tabindex="-1"><a class="header-anchor" href="#yaxis-y-轴" aria-hidden="true">#</a> yAxis-y 轴</h2><p>直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
   <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;value&#39;</span><span class="token punctuation">,</span>
   <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;         金额( 单位: 万元 )&quot;</span><span class="token punctuation">,</span>
   <span class="token literal-property property">nameTextStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
     <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;#ffffff&#39;</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token literal-property property">axisLine</span><span class="token operator">:</span> <span class="token punctuation">{</span>
     <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
     <span class="token literal-property property">lineStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
       <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;dashed&#39;</span><span class="token punctuation">,</span>
       <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;rgba(135,140,147,0.8)&#39;</span>
     <span class="token punctuation">}</span>，
     <span class="token literal-property property">axisLabel</span><span class="token operator">:</span> <span class="token punctuation">{</span>
       <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
       <span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
         <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;#fff&quot;</span><span class="token punctuation">,</span>
         <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">&quot;16&quot;</span><span class="token punctuation">,</span>
       <span class="token punctuation">}</span><span class="token punctuation">,</span>
       <span class="token function-variable function">formatter</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span><span class="token punctuation">{</span>     <span class="token comment">//设置Y轴显示的名字，超出做..隐藏</span>
         <span class="token keyword">var</span> res <span class="token operator">=</span> value<span class="token punctuation">;</span>
         <span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>length <span class="token operator">&gt;</span><span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
           res <span class="token operator">=</span> res<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;..&quot;</span>
         <span class="token punctuation">}</span>
         <span class="token keyword">return</span> res<span class="token punctuation">;</span>
       <span class="token punctuation">}</span>
     <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token literal-property property">splitLine</span><span class="token operator">:</span> <span class="token punctuation">{</span>
     <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
     <span class="token literal-property property">lineStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
       <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;dashed&#39;</span><span class="token punctuation">,</span>   <span class="token comment">//背景线为虚线</span>
       <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;rgba(135,140,147,.8)&#39;</span> <span class="token comment">//左侧显示线</span>
     <span class="token punctuation">}</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token literal-property property">axisLabel</span><span class="token operator">:</span> <span class="token punctuation">{</span>
     <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">&#39;{value}&#39;</span><span class="token punctuation">,</span>
     <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;#fff&#39;</span><span class="token punctuation">,</span>
     <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span>
   <span class="token punctuation">}</span>
 <span class="token punctuation">}</span><span class="token punctuation">,</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="series-line-折线-面积图" tabindex="-1"><a class="header-anchor" href="#series-line-折线-面积图" aria-hidden="true">#</a> series-line--折线/面积图</h2><p>折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。可用于直角坐标系和极坐标系上</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">line</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	  <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	       <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	           <span class="token comment">// color: 各异,</span>
	           <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	               <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>
	               <span class="token comment">// position: 默认自适应，水平布局为&#39;top&#39;，垂直布局为&#39;right&#39;，可选为</span>
	               <span class="token comment">//           &#39;inside&#39;|&#39;left&#39;|&#39;right&#39;|&#39;top&#39;|&#39;bottom&#39;</span>
	               <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
	           <span class="token punctuation">}</span><span class="token punctuation">,</span>
	           <span class="token literal-property property">lineStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	               <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
	               <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;solid&#39;</span><span class="token punctuation">,</span>
	               	<span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	               	<span class="token comment">//线的渐变颜色</span>
		                <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">echarts<span class="token punctuation">.</span>graphic<span class="token punctuation">.</span>LinearGradient</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0.7</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>        
		                  <span class="token punctuation">{</span>
		                    <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
		                    <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;#24D5CC&quot;</span><span class="token punctuation">,</span>
		                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
		                  <span class="token punctuation">{</span>
		                    <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
		                    <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;#7A50F1&quot;</span><span class="token punctuation">,</span>
		                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
		                <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
		                <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0.75</span><span class="token punctuation">,</span>
		              <span class="token punctuation">}</span><span class="token punctuation">,</span>
	               <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">&#39;rgba(0,0,0,0)&#39;</span><span class="token punctuation">,</span> <span class="token comment">//默认透明  阴影</span>
	               <span class="token literal-property property">shadowBlur</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
	               <span class="token literal-property property">shadowOffsetX</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
	               <span class="token literal-property property">shadowOffsetY</span><span class="token operator">:</span> <span class="token number">3</span>
	           <span class="token punctuation">}</span>，
	           <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	              <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	                <span class="token literal-property property">lineStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	                  <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">//设置线条粗细</span>
	                <span class="token punctuation">}</span><span class="token punctuation">,</span>
	              <span class="token punctuation">}</span><span class="token punctuation">,</span>
	            <span class="token punctuation">}</span><span class="token punctuation">,</span>
	          <span class="token literal-property property">areaStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>   <span class="token comment">//折线图覆盖面积</span>
                  <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">echarts<span class="token punctuation">.</span>graphic<span class="token punctuation">.</span>LinearGradient</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>
                      <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
                      <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;rgba(255,80,124,0)&quot;</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                      <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                      <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;rgba(255,80,124,0.35)&quot;</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                  <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>    <span class="token comment">//渐变色</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
	       <span class="token punctuation">}</span><span class="token punctuation">,</span>
	       <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span>   <span class="token comment">// 鼠标移入</span>
	           <span class="token comment">// color: 各异,</span>
	           <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	               <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>
	               <span class="token comment">// position: 默认自适应，水平布局为&#39;top&#39;，垂直布局为&#39;right&#39;，可选为</span>
	               <span class="token comment">//           &#39;inside&#39;|&#39;left&#39;|&#39;right&#39;|&#39;top&#39;|&#39;bottom&#39;</span>
	               <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
	           <span class="token punctuation">}</span>
	       <span class="token punctuation">}</span>
	   <span class="token punctuation">}</span><span class="token punctuation">,</span>
	   <span class="token comment">//smooth : false,  //是否平滑</span>
	   <span class="token comment">//symbol: null,         // 拐点图形类型,可以自己设置图片</span>
	   <span class="token literal-property property">symbolSize</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 拐点图形大小</span>
	   <span class="token literal-property property">symbolOffset</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;0&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;-8&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token comment">//拐点位置</span>
	   <span class="token comment">//symbolRotate : null,  // 拐点图形旋转控制</span>
	   <span class="token literal-property property">showAllSymbol</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="series-bar-柱状图" tabindex="-1"><a class="header-anchor" href="#series-bar-柱状图" aria-hidden="true">#</a> series-bar--柱状图</h2><p>柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">bar</span><span class="token operator">:</span><span class="token punctuation">{</span>
	<span class="token literal-property property">barMinHeight</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 最小高度改为0</span>
    <span class="token comment">// barWidth: null,        // 默认自适应</span>
    <span class="token literal-property property">barGap</span><span class="token operator">:</span> <span class="token string">&#39;30%&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 柱间距离，默认为柱形宽度的30%，可设固定值</span>
    <span class="token literal-property property">barCategoryGap</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 类目间柱形距离，默认为类目间距的20%，可设固定值</span>
    <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// color: &#39;各异&#39;,</span>
            <span class="token literal-property property">barBorderColor</span><span class="token operator">:</span> <span class="token string">&#39;#fff&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 柱条边线</span>
            <span class="token literal-property property">barBorderRadius</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 柱条边线圆角，单位px，默认为0</span>
            <span class="token literal-property property">barBorderWidth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 柱条边线线宽，单位px，默认为1</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token comment">//z柱状图上显示数字</span>
                <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>
                <span class="token comment">// position: 默认自适应，水平布局为&#39;top&#39;，垂直布局为&#39;right&#39;，可选为</span>
                <span class="token comment">//           &#39;inside&#39;|&#39;left&#39;|&#39;right&#39;|&#39;top&#39;|&#39;bottom&#39;</span>
                <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span>   <span class="token comment">// 鼠标移入的样式</span>
            <span class="token comment">// color: &#39;各异&#39;,</span>
            <span class="token literal-property property">barBorderColor</span><span class="token operator">:</span> <span class="token string">&#39;rgba(0,0,0,0)&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 柱条边线</span>
            <span class="token literal-property property">barBorderRadius</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 柱条边线圆角，单位px，默认为0</span>
            <span class="token literal-property property">barBorderWidth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 柱条边线线宽，单位px，默认为1</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>
                <span class="token comment">// position: 默认自适应，水平布局为&#39;top&#39;，垂直布局为&#39;right&#39;，可选为</span>
                <span class="token comment">//           &#39;inside&#39;|&#39;left&#39;|&#39;right&#39;|&#39;top&#39;|&#39;bottom&#39;</span>
                <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="series-pie-饼图" tabindex="-1"><a class="header-anchor" href="#series-pie-饼图" aria-hidden="true">#</a> series-pie--饼图</h2><p>饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。 从 ECharts v4.6.0 版本起，我们提供了 &#39;labelLine&#39; 与 &#39;edge&#39; 两种新的布局方式。详情参见 label.alignTo。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 横向柱状图</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;pie&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;45%&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;60%&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">center</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
      <span class="token literal-property property">data</span><span class="token operator">:</span> echartData<span class="token punctuation">,</span>
      <span class="token literal-property property">hoverAnimation</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">borderColor</span><span class="token operator">:</span> bgColor<span class="token punctuation">,</span>
          <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">2</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">labelLine</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">length</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
          <span class="token comment">// length2: 100,</span>
          <span class="token literal-property property">lineStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;#999&quot;</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">//https://echarts.apache.org/zh/option.html#grid.tooltip.formatter</span>
        <span class="token comment">//{a},{b},{c},{d}各代表不同的值</span>
        <span class="token comment">// formatter: &quot;{font|{b}}\n{hr|}\n{font|{d}%}&quot;,</span>
          <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token parameter">params</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">(</span>
              <span class="token string">&quot;{icon|●}{name|&quot;</span> <span class="token operator">+</span>
              params<span class="token punctuation">.</span>name <span class="token operator">+</span>
              <span class="token string">&quot;}{value|&quot;</span> <span class="token operator">+</span>
              <span class="token function">formatNumber</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token operator">+</span>
              <span class="token string">&quot;}&quot;</span>
            <span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">16</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
              <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
              <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;#666&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
              <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">&quot;bold&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;#666&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token literal-property property">hr</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
              <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
              <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&quot;100%&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">&quot;#999&quot;</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>


</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></div><footer class="page-meta"><div class="meta-item edit-link"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M2 26h28v2H2z" fill="currentColor"></path><path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Edit this page<!--]--></span></span></div><div class="meta-item last-updated"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Last Updated 2023-04-08 09:19:01<!--]--></span></span></div></footer><!----><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">文章目录</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/blogs/qianduan/122201.html#title-标题组件" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="title--标题组件"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->title--标题组件<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/blogs/qianduan/122201.html#legend-图例组件" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="legend--图例组件"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->legend--图例组件<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/blogs/qianduan/122201.html#tooltip-提示框组件" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="tooltip--提示框组件"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->tooltip--提示框组件<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/blogs/qianduan/122201.html#grid-可用于调整图例在整个容器中的占位" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="grid--可用于调整图例在整个容器中的占位"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->grid--可用于调整图例在整个容器中的占位<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/blogs/qianduan/122201.html#xaxis-x-轴" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="xAxis--x 轴"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->xAxis--x 轴<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/blogs/qianduan/122201.html#yaxis-y-轴" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="yAxis-y 轴"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->yAxis-y 轴<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/blogs/qianduan/122201.html#series-line-折线-面积图" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="series-line--折线/面积图"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->series-line--折线/面积图<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/blogs/qianduan/122201.html#series-bar-柱状图" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="series-bar--柱状图"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->series-bar--柱状图<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/blogs/qianduan/122201.html#series-pie-饼图" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="series-pie--饼图"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->series-pie--饼图<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/wb/assets/app-32a7af8e.js" defer></script>
  </body>
</html>
